<template>
  <div>
    <h4>这是减法组件</h4>
    <!-- 在视图中直接访问共享的数据是通过 $store.state.xxx 访问的 -->
    <!-- <div>Vuex 中存储的 Count 数据是： {{ $store.state.count }}</div> -->
    <div>Vuex 中存储的 Count 数据是： {{ count }}</div>
    <button @click="subFunc">- 1</button>
    <button @click="subFuncSAsync">-1 Async</button>
    <button @click="subHandleN(2)">-N</button>
    <button @click="subNAsync(3)">-N Async</button>
  </div>
</template>

<script>
import { mapState, mapMutations, mapActions } from 'vuex'
console.log(mapActions(['subNAsync']))

export default {
  name: 'Jian',
  data () {
    return {}
  },
  methods: {
    ...mapMutations(['subHandleN']),
    ...mapActions(['subNAsync']),
    // {subNAsync () {}}
    // subNAsync () {}

    subFunc () {
      this.$store.commit('subHandle')
    },

    subFuncSAsync () {
      this.$store.dispatch('subAsync')
    }

    // subFuncNAsync () {
    //   this.subNAsync(3)
    // },

    // subFuncN () {
    //   this.subHandleN(2)
    // }
  },
  computed: {
    ...mapState(['count'])
  }
}
</script>

<style lang="less" scoped>
button {
  margin-top: 20px;
}
</style>
